/* Stylesheet - Basisgestaltung des karten-basierten Layouts */

body {
	/* background: hsl(0, 0%, 90%); */
}
img {
	width: 100%;
}
.site-title {
	/* color: white; */
}

/* Styling für die Karten */
.cards, .cards_2,.cards_4 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin: -1em 1em;
}
.cards_4 {
	justify-content: flex-end;
}
.cards_4 img {
	height: 20px;
	width: 20px;
}
.card {
	background: white;
	margin-bottom: 2em;
	box-shadow: 12px 10px 39px 1px #0c240a;
}
.card a {
	/* background: black; */
	text-decoration: none;
	color: black;
	max-width: 99.99%;/* Ie bug */
}
.card a:hover {
	box-shadow: 3px 3px 8px hsl(0, 0%, 20%);
}
.card-content {
	padding: 1.0em;
}
.card-content h4 {
	margin-top: 0;
	margin-bottom: 1em;
	font-weight: normal;
}
.card_2 {
	margin-bottom: 2em;
}
#portrait_klaus {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 200px;
	justify-content: center;
}
#adresse_klaus {
	width: 300px;
	background: white;
	box-shadow: 12px 10px 39px 1px #0c240a;
}
.adresstext_links { font-weight: bold;
	padding-right: 0.3em;
}
#adress-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0.5em;
	font-size: 0.8em;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
}
.text_anfahrt {font-size: 0.8em;}
.landkarte {
	padding: 0.5em;
}
#gr {
 width: 100%;
 height: 300px;
 border: 0px;
 margin: 0em 0em 1em 0em;
}


/* Flexbox */

@media screen and (min-width: 30em) {

.cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin: -1em 1em;
}
.card {
	-webkit-box-flex: 0;
	    -ms-flex: 0 1 calc(50% - 0.5em);
	        flex: 0 1 calc(50% - 0.5em);
	-ms-flex-preferred-size: calc(50% - 0.5em);
	    flex-basis: calc(50% - 0.5em);/* Ie bug */
	margin: 1em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.card_2, .card_3, .airbnb {
	margin: 1em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.card_4 {
	margin: 1em 5em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.cards_4 {
	margin: 1em 5em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#portrait_klaus {
	background: white;
	box-shadow: 12px 10px 39px 1px #0c240a;
}
div.card-content {
	padding: 1.4em;
}
/* .card-content p {
	font-size: 95%;
} */
.landkarte {
	padding: 2em;
}
#gr {
 width: 100%;
 height: 450px;
 border: 2px;
 margin: 0em;
}
}
@media screen and (min-width: 40em) {
.card {
	-webkit-box-flex: 0;
	    -ms-flex: 1 1 calc(33% - 1em);
	        flex: 1 1 calc(33% - 1em);
	-ms-flex-preferred-size: calc(33% - 1em);
	    flex-basis: calc(33% - 1em);/* Ie bug */
	/* margin: 2em 1.5em;	 */
}
.text_anfahrt {font-size: 1.1em;}
}
@media screen and (min-width: 60em) {
.cards {
	margin-top: inherit;
}
.card {
	-webkit-box-flex: 0;
	    -ms-flex: 1 1 calc(33% - 1em);
	        flex: 1 1 calc(33% - 1em);
	margin: 2em;
}
}